<template>
	<view class="pages">
		<view class="top">
			<view class="top1" :style="'height:'+CustomBar+'px;'">
				<view class="top1-1" @click="gopage('/pages/shequgeli/xiaooquxuanze',1,1)">
					<image src="https://x.bilinmeiju.com/static/index/地址@2x.png" style="width: 33rpx;height: 38rpx;"
						mode=""></image>
					<view class="top1text">
						{{shequ}}
					</view>
					<image src="https://x.bilinmeiju.com/static/index/向下@2x.png" style="width: 18rpx;height: 10rpx;"
						mode=""></image>
				</view>
			</view>

			<view v-if="istopscroll" class="topyin" :style="'height:'+CustomBar+'px;'">
				<view class=""></view>
				<view :style="'margin-top:'+top+'px;'" class="toptextyin">
					{{shequ}}
				</view>
				<view class=""></view>
			</view>

			<image v-if="!vering" @click="$gopage()" class="top2image"
				src="https://x.bilinmeiju.com/static/index/sousuo.png" mode=""></image>
			<view class="top2" v-if="!vering" @click="$gopage()">
				<input class="top2input" type="text" placeholder="搜索更多的">
				<image class="top2-1img" src="https://x.bilinmeiju.com/static/index/xiaoxi.png" mode=""></image>
			</view>
			<!-- 轮播 -->
			<view class="lunbo">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<view class="swiperview">
							<image class="swiperimg" :src="item.path" mode=""></image>
						</view>
					</swiper-item>

				</swiper>
			</view>

			<view class="index-ggwk">
				<view class="index-wzwk">
					<image src="https://x.bilinmeiju.com/static/index/sqzx.png"></image>
				</view>
				<view class="centerxian" style="margin-left: 64rpx;"></view>
				<swiper class="index-ggnr" circular vertical autoplay>
					<block v-for="(item,index) in news" :key="index">
						<swiper-item catchtouchmove='catchTouchMove' @click="newsinfo(item.id)">
							<view style="display: flex; flex-flow:row nowrap; justify-content: start;height: 100%;">
								<view class="center1" :style="item.color?'background-color:'+item.color+';' : ''">
									{{item.type}}
								</view>
								<view class="center2">
									{{item.title}}
								</view>
							</view>

						</swiper-item>
					</block>
				</swiper>
			</view>

			<view class="title">

				<view class="" v-for="(item,index) in shequicon" :key="index">
					<view class="title1" @click="$gopage(item.path,1,item.islogin)">
						<image class="title1img" :src="item.icon[0]" mode=""></image>
						<view class="title1text">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="title1" @click="$gopage('/pages/index/fuwu',3,1)">
					<image class="title1img" src="/static/log/title10.png" mode=""></image>
					<view class="title1text" style="text-align: center;">
						全部
					</view>
				</view>
			</view>
			<!-- <view class="title">
				<view class="title1" v-if="!vering" @click="gofangke('/pages/center/fangke/fangkelog')">
					<image class="title1img" src="https://x.bilinmeiju.com/static/index/title6.png" mode=""></image>
					<view class="title1text">
						访客通行
					</view>
				</view>
				<view class="title1" v-if="!vering" @click="$gopage('',1,1)">
					<image class="title1img" src="https://x.bilinmeiju.com/static/index/title7.png" mode=""></image>
					<view class="title1text">
						社区周边
					</view>
				</view>
				<view class="title1" v-if="!vering" @click="$gopage('',1,1)">
					<image class="title1img" src="https://x.bilinmeiju.com/static/index/title8.png" mode=""></image>
					<view class="title1text">
						每日签到
					</view>
				</view>
				<view class="title1" @click="$gopage('/pages/center/baoxiu/index',1,1)">
					<image class="title1img" src="https://x.bilinmeiju.com/static/index/title9.png" mode=""></image>
					<view class="title1text" style="text-align: center;">
						物业报修
					</view>
				</view>
				
			</view> -->
			<view class="" style="display: flex;justify-content: center;">
				<!-- <image class="cdd" src="../../static/index/cdd.png" mode=""></image>-->
			</view>

			<view class="comp">
				<image class="compimg" src="http://img.bilinmeiju.com/banner.png" mode=""></image>
			</view>

			<view class="jianbian" v-if="!vering&&goodslist.length>0" @click="$gopage()"></view>
			<view class="box1" v-if="!vering&&goodslist.length>0" @click="$gopage()">
				<view class="box1-1">
					<image class="box1-1img" src="https://x.bilinmeiju.com/static/index/time2.png" mode=""></image>
					<view class="box1-1text">
						限时秒杀
					</view>
					<image class="box1-1img1" src="https://x.bilinmeiju.com/static/index/time2x.png" mode=""></image>
				</view>
				<view class="box1-2">
					<view class="box1-2text">查看更多</view>
					<image class="box1-2img" src="https://x.bilinmeiju.com/static/index/jt2@2x.png" mode=""></image>
				</view>
			</view>
			<view class="scroll-view" v-if="!vering&&goodslist.length>0" @click="$gopage()">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view class="scroll-view-item_H uni-bg-red">
						<view class="scroll-view1">
							<view class="scroll-view1text">
								获9邻里币
							</view>
							<image class="view-img" src="https://x.bilinmeiju.com/static/index/juxingyezi.png" mode="">
							</image>
							<image class="view-img2" src="http://img.bilinmeiju.com/yingtao.png" mode=""></image>
							<view class="scroll-view1text1">
								缤纷田园红樱桃
							</view>
							<view class="scroll-view1text2">
								已售230件 剩余12件
							</view>
							<view class="" style="display: flex;justify-content: space-between;">
								<view class="scroll-view2text">
									￥340
								</view>
								<image class="scroll-view2img" src="https://x.bilinmeiju.com/static/index/jia.png"
									mode=""></image>
							</view>
						</view>
						<view class="scroll-view1">
							<view class="scroll-view1text">
								获8邻里币
							</view>
							<image class="view-img" src="https://x.bilinmeiju.com/static/index/juxingyezi.png" mode="">
							</image>
							<image class="view-img2" src="http://img.bilinmeiju.com/yingtao.png" mode=""></image>
							<view class="scroll-view1text1">
								缤纷田园红樱桃
							</view>
							<view class="scroll-view1text2">
								已售230件 剩余12件
							</view>
							<view class="" style="display: flex;justify-content: space-between;">
								<view class="scroll-view2text">
									￥340
								</view>
								<image class="scroll-view2img" src="https://x.bilinmeiju.com/static/index/jia.png"
									mode=""></image>
							</view>
						</view>
						<view class="scroll-view1">
							<view class="scroll-view1text">
								获8邻里币
							</view>
							<image class="view-img" src="https://x.bilinmeiju.com/static/index/juxingyezi.png" mode="">
							</image>
							<image class="view-img2" src="http://img.bilinmeiju.com/yingtao.png" mode=""></image>
							<view class="scroll-view1text1">
								缤纷田园红樱桃
							</view>
							<view class="scroll-view1text2">
								已售230件 剩余12件
							</view>
							<view class="" style="display: flex;justify-content: space-between;">
								<view class="scroll-view2text">
									￥340
								</view>
								<image class="scroll-view2img" src="https://x.bilinmeiju.com/static/index/jia.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<tabbar :selected="0" :vering="vering"></tabbar>
		<box ref="box"></box>
		<!-- <image class="topimg" src="/static/index/biejing.png" mode=""></image> -->
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				box: {
					isshow: false,
					title: '提示',
					content: '',
					content2: '',
					btntitle: '知道了',
					path: ''
				},
				title: 'Hello',
				CustomBar: 0,
				istopscroll: false,
				top: 0,
				shequicon: [],
				token: '',
				shequ: '比邻社区',
				autoplay: true,
				interval: 4000,
				duration: 800,
				vering: 1,
				goodslist: [],
				news: [{
					id: 1,
					title: '这是一条测试数据',
					type: '社区公告'
				}, {
					id: 1,
					title: '这是一条测试数据2',
					type: '社区公告'
				}],
				banner: [{
					id: 1,
					path: 'http://img.bilinmeiju.com/lunbo.png',
					url: ''
				}, {
					id: 1,
					path: 'http://img.bilinmeiju.com/lunbo.png',
					url: ''
				}]
			}
		},

		onPageScroll(e) {

			if (e.scrollTop > 45) {
				this.istopscroll = true
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			} else {
				this.istopscroll = false
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ffffff',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			}
		},
		onPageScroll(e) {

			if (e.scrollTop > 45) {
				this.istopscroll = true
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			} else {
				this.istopscroll = false
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ffffff',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			}
		},
		onShow() {
			var shequ = uni.getStorageSync('shequ');
			if (shequ) that.shequ = shequ;
			var token = uni.getStorageSync('token');
			this.token = token;
			uni.hideTabBar({
				animation: false
			})

			const updateManager = wx.getUpdateManager()
			updateManager.onCheckForUpdate(function(res) {
				// 请求完新版本信息的回调
				console.log(res.hasUpdate)
			})
			updateManager.onUpdateReady(function() {
				updateManager.applyUpdate()
			})
			updateManager.onUpdateFailed(function() {
				// 新版本下载失败
			})
			this.$post('api/getindex', {}).then(res => {
				this.vering = res.data.vering;
				uni.setStorageSync('vering', this.vering);
				that.getnews();
			})
		},

		onLoad(options) {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 10
			var token = uni.getStorageSync('token');
			this.token = token;
			that = this;


			if (options.scene) {
				var scene = decodeURIComponent(options.scene);
				var urldata = this.geturl(scene);

				if (urldata['q']) {
					//如果是扫描房产二维码
					if (this.token) {
						uni.navigateTo({
							url: '/pages/fangchanbangding/add_code?code=' + urldata['q']
						})
					} else {
						uni.showModal({

							title: '登录提示',
							content: '您需要登录后进行绑定',
							confirmText: '去登录',
							success(e) {
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/login/login?q=' + urldata['q']
									})
								}
							}
						})
					}
				}
			}
			that.getlist()
		},
		methods: {
			getnews() {
				that.$post('api/getnews', {}).then(res => {
					// that.banner = res.data.banner;
					that.news = res.data.news
				})
			},
			//数据图标
			getlist() {
				that.$post('api/getnav', {
					isindex: 1
				}).then(res => {
					console.log('1231231', res.list);
					that.shequicon = res.list
					// res.list.forEach(item => {
					// 	if (item.type == 1) {
					// 		that.shequ.push(item)
					// 	} else if (item.type == 2) {
					// 		that.bilin.push(item)
					// 	} else if (item.type == 3) {
					// 		that.changyong.push(item)
					// 	}
					// })
				})
			},

			gorenlian(path) {
				//判断我是否有房产
				this.$post('center/getmyroom', {}).then(res => {
					if (res.data.list.length > 0) {
						this.$gopage(path);
					} else {
						this.showbind();
					}
				})
			},
			gofangke(path) {
				//判断我是否有房产
				this.$post('center/getmyroom', {}).then(res => {
					if (res.data.list.length > 0) {
						this.$gopage(path);
					} else {
						this.showbind();
					}
				})
			},
			showbind() {
				var box = {
					isshow: true,
					title: '请绑定房产',
					content: '请先进行房产绑定',
					content2: '然后进行数据录入',
					btntitle: '去绑定',
					path: '/pages/fangchanbangding/fangchanbangding'
				}
				this.box = box;
				this.$refs.box.open(box)
			},
			newsinfo(id) {
				uni.navigateTo({
					url: '/pages/news/info?id=' + id
				})
			},
			gohref(path) {
				if (!path) return false;
				that.gopage(path);
			},
			gopage(path, type) {
				this.$gopage(path, type, 1);
			},
			csxz() {
				uni.navigateTo({
					url: '/pages/shequgeli/chengshixuanz'
				})
			},
			fangchanbd() {
				uni.navigateTo({
					url: '/pages/fangchanbangding/fangchanbangding'
				})
			},
			geturl(url) {
				var val;
				var newurl = url;
				if (newurl) {
					var forurl = newurl.split('&');
					var pageval = new Object();
					for (var i = 0; i < forurl.length; i++) {
						var nowkey = forurl[i].split('_');
						for (var n = 0; n < nowkey.length; n++) {
							pageval[nowkey[0]] = nowkey[1]
						}
					}
				}
				if (!pageval) {
					return '';
				} else {
					return pageval;
				}
			}
		}
	}
</script>

<style>
	page {
		background: url('http://img.bilinmeiju.com/biejing.png') no-repeat;
		background-size: 750rpx auto;
	}

	.topyin {
		z-index: 9;
		width: 100vw;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
	}

	.toptextyin {
		z-index: 2;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 20rpx;
	}

	.top {
		width: 100vw;
		height: 409rpx;
	}

	.topimg {
		width: 100vw;
		height: 409rpx;
		z-index: -1;
		position: absolute;
		top: 0;
	}

	.top1 {
		margin-left: 39rpx;
		display: flex;
		align-items: flex-end;
	}

	.top1-1 {
		max-width: 330rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.top1text {
		/* height: 26px; */
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		line-height: 28rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.top2 {
		margin: 0 auto;
		margin-top: 21rpx;
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top2image {
		width: 32rpx;
		height: 30rpx;
		position: relative;
		top: 75rpx;
		left: 50rpx;
	}

	.top2-1img {
		width: 34rpx;
		height: 34rpx;
	}

	.top2input {
		width: 635rpx;
		height: 79rpx;
		radius: 30%;
		color: #F4652F;
		padding-left: 85rpx;
		background-color: rgb(255, 255, 255, 0.3);
	}

	.swiperview {
		margin: 20rpx;
		width: 710rpx;
		height: 244rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.swiperimg {
		width: 710rpx;
		height: 244rpx;
	}

	.center {
		padding-left: 20rpx;
		width: 680rpx;
		margin: 10rpx auto;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
	}

	.centerimg {
		width: 53rpx;
		height: 52rpx;
	}

	.centerxian {
		width: 4rpx;
		height: 52rpx;
		margin: 0px 10rpx;
		background-color: darkgray;
	}

	.center1 {
		width: 77rpx;
		height: 32rpx;
		margin-top: 12rpx;
		color: white;
		font-size: 16rpx;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 32rpx;
		border-radius: 8rpx;
		background-color: rgb(186, 221, 139);
	}

	.center2 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
		padding-left: 20rpx;
	}

	.title {
		width: 700rpx;
		margin: 20rpx auto;
		display: flex;
		/* justify-content: space-around; */
		flex-wrap: wrap;
	}

	.title1 {
		width: 140rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.title1img {
		width: 100rpx;
		height: 100rpx;
	}

	.title1text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #666666;
		line-height: 20rpx;
		margin-top: 17rpx;
	}

	.cdd {
		width: 53rpx;
		height: 12rpx;
		margin: 40rpx auto;
	}

	.comp {
		width: 700rpx;
		margin: auto;
	}

	.compimg {
		width: 674rpx;
		height: 134rpx;
	}

	.jianbian {
		width: 700rpx;
		height: 40rpx;
		margin-top: 41rpx;
		margin: 0 auto;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		background: linear-gradient(to top, #ffffff, #FE8140)
	}

	.box1 {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box1-1 {
		width: 350rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box1-1img {
		width: 60rpx;
		height: 60rpx;

	}

	.box1-1img1 {
		width: 135rpx;
		height: 31rpx;
	}

	.box1-2 {
		width: 90rpx;
		display: flex;
		justify-content: space-around;
	}

	.box1-2text {
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #999999;
	}

	.box1-2img {
		width: 10rpx;
		height: 18rpx;
	}

	.scroll-view-item_H {
		display: flex;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 700rpx;
		margin: 0 auto;
	}

	.scroll-view1 {
		width: 183rpx;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
	}

	.scroll-view1text {
		font-size: 16rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFEFE;
		line-height: 35rpx;
		margin-bottom: -34rpx;
		margin-left: 10rpx;
		z-index: 2;
	}

	.scroll-view1text1 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		line-height: 33rpx;
	}

	.scroll-view1text2 {
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
	}

	.view-img {
		width: 86rpx;
		height: 34rpx;
		margin-bottom: -34rpx;
		z-index: 1;
	}

	.view-img2 {
		width: 183rpx;
		height: 182rpx;
	}

	.scroll-view2img {
		width: 37rpx;
		height: 37rpx;
	}

	.scroll-view2text {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FF6110;
		line-height: 35rpx;
	}

	.index-ggwk {
		background: #fff;
		height: 52rpx;
		line-height: 52rpx;
		margin-bottom: 40rpx;
		display: flex;
		display: -webkit-flex;
	}

	.index-wzwk {
		width: 53rpx;
		height: 52rpx;
		/* box-shadow:10rpx 0  10rpx #f5f5f5; */
	}

	.index-wzwk image {
		width: 53rpx;
		height: 52rpx;
		margin-left: 52rpx;
	}

	.index-ggnr {
		padding-left: 10rpx;
		font-size: 22rpx;
		color: #666;
		flex: 1;
		-webkit-flex: 1;
		height: 100%;
		justify-items: center;
	}
</style>
